<template>
  <div class="food-table">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="order"
        label="#">
      </el-table-column>
      <el-table-column
        prop="ch"
        label="中文名称"
        width="220">
      </el-table-column>
      <el-table-column
        prop="en"
        label="English name"
        width="220">
      </el-table-column>
      <el-table-column
        prop="jp"
        label="日本語の名称"
        width="220">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'FoodTable',
  data() {
    return {
      tableData: [{
        order: '1',
        ch: '面包',
        en: 'bread',
        jp: 'パン'
      }, {
        order: '2',
        ch: '乳制品',
        en: 'dairy product',
        jp: '乳製品'
      }, {
        order: '3',
        ch: '甜点',
        en: 'dessert',
        jp: 'デザート'
      }, {
        order: '4',
        ch: '鸡蛋',
        en: 'egg',
        jp: 'たまご'
      }, {
        order: '5',
        ch: '油炸食品',
        en: 'fried food',
        jp: '揚げ物'
      }, {
        order: '6',
        ch: '肉类',
        en: 'meat',
        jp: '肉類'
      }, {
        order: '7',
        ch: '面条和意大利面',
        en: 'noodles and pasta',
        jp: 'うどんとパスタ'
      }, {
        order: '8',
        ch: '米饭',
        en: 'rice',
        jp: 'ご饭'
      }, {
        order: '9',
        ch: '海鲜',
        en: 'seafood',
        jp: 'シーフード'
      }, {
        order: '10',
        ch: '汤',
        en: 'soup',
        jp: 'スープ'
      }, {
        order: '11',
        ch: '蔬菜和水果',
        en: 'vegetable and fruit',
        jp: '野菜と果物'
      }]
    }
  }
}
</script>

<style lang="scss">
.food-table {
  width: 760px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 60px;

  .el-table th.is-leaf {
    background-color: #1a1832 !important;
    color: #26d1ff !important;
  }

  .el-table td {
    background-color: #1a1832 !important;
    color: #f5f7f9 !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #465879 !important;
  }
}
</style>
